<template>
  <div class="app-container" style="grid-template-columns: auto;">

    <div class="rightSidebar">
      <el-card class="rightSidebarTop box-card">
        <div slot="header">
          <span class="lumpText">中低压项目: {{ InfoCardObj.projectName }}</span>
        </div>
        <div class="content">

          <div class="ListRow" v-if="InfoCardObj.projectType === 0">
            <span class="ListName">非居用户类型:</span>
            <dict-tag class="ListValue" :options="dict.type.feiju_user_type" :value="InfoCardObj.userType"/>
          </div>
          <div class="ListRow">
            <span class="ListName">对接单位:</span>
            <span>{{ InfoCardObj.unit }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">详细地址:</span>
            <span>{{ InfoCardObj.address }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">介绍人:</span>
            <span>{{ InfoCardObj.introducer }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">总负责人:</span>
            <span>{{ getUserName() }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">项目人员:</span>
            <span>
     <span v-for="(user, index) in userOptions" :key="user.userId">
      <span v-if="InfoCardObj.userIds.includes(user.userId)">
      {{ user.nickName }}
        <span v-if="index < InfoCardObj.userIds.length - 1">,</span>
      </span>
    </span>
  </span>
          </div>

          <div class="ListRow">
            <span class="ListName">项目类型:</span>
            <dict-tag class="ListValue" :options="dict.type.project_type" :value="InfoCardObj.projectType"/>
          </div>
          <div class="ListRow">
            <span class="ListName">项目阶段:</span>
            <dict-tag class="ListValue" :options="dict.type.project_step" :value="InfoCardObj.projectStep"/>
          </div>
          <div class="ListRow">
            <span class="ListName">预计项目开始日期:</span>
            <span>{{ InfoCardObj.projectStartDate }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">预计项目结束日期:</span>
            <span>{{ InfoCardObj.projectEndDate }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">部门职位:</span>
            <span>{{ InfoCardObj.deptPost }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">对接单位对接人:</span>
            <span>{{ InfoCardObj.recepter }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">对接人联系方式:</span>
            <span>{{ InfoCardObj.phone }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">项目预算:</span>
            <span>{{ InfoCardObj.projectBudget }}</span>
          </div>
          <div class="ListRow">
            <span class="ListName">备注:</span>
            <span>{{ InfoCardObj.remark }}</span>
          </div>

        </div>
      </el-card>

      <!--下半部分项目阶段?-->
      <el-card class="rightSidebarTop box-card">
        <div slot="header">
          <span class="lumpText">项目阶段</span>
        </div>
        <div class="content">
          <div style="display: flex;margin-left: 10%;margin-right: 0%;">
            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/对接.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;">对接阶段</div>

                <img v-if="InfoCardObj.projectStep > 1" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition" style="margin-top: 16px;">执行天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton" v-on:click="openDockStage()" onmousemove="">编辑</button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/勘察.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;">勘察阶段</div>

                <img v-if="InfoCardObj.projectStep > 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 2" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition " style="margin-top: 16px;">勘察天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton1" v-on:click="openExplorationStage()">编辑</button>
                <button class="runContentButton1" v-on:click="openExplorationStage()">预留按钮</button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/方案编制.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;">方案编制阶段</div>

                <img v-if="InfoCardObj.projectStep > 3" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 3" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition " style="margin-top: 16px;">执行天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton" v-on:click="openPlanPreparationStage()">编辑</button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/方案汇报.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;">方案汇报阶段</div>

                <img v-if="InfoCardObj.projectStep > 4" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 4" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition " style="margin-top: 16px;">执行天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton" v-on:click="openPlanReportStage()">编辑</button>
              </div>
            </div>
          </div>

          <div style="display: flex;margin-top:20px ;margin-left: 10%;">
            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/报价.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;;">报价阶段</div>

                <img v-if="InfoCardObj.projectStep > 5" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 5" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition " style="margin-top: 16px;">执行天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton" v-on:click="openQuotationStage()">编辑</button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/施工.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;">施工阶段</div>

                <img v-if="InfoCardObj.projectStep > 6" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 6" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition " style="margin-top: 16px;">执行天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton" v-on:click="openConstructionStage()">编辑</button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/验收.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;">验收阶段</div>

                <img v-if="InfoCardObj.projectStep > 7" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 7" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition " style="margin-top: 16px;">执行天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton" v-on:click="openAcceptStage()">编辑</button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 20px;" class="stageFont">
                <img src="@/assets/images/stageIcon/合同签订.png"
                     style="width: 16px;height: 16px;margin-left: 30px;margin-top: 2.5px;">
                <div style="margin-left: 5px;width: 141px;">合同签订阶段</div>

                <img v-if="InfoCardObj.projectStep > 8" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else-if="InfoCardObj.projectStep === 8" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
                <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                     style="width: 16px;height: 16px;margin-left: 50px;">
              </div>

              <div class="stageFont centerPosition " style="margin-top: 16px;">执行天数：12天</div>
              <div class="centerPosition" style="margin-top: 12px;">2022-12-31~2023-01-11</div>
              <div class="centerPosition" style="margin-top: 16px;">
                <button class="runContentButton" v-on:click="openContractSignStage()">编辑</button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 添加或修改项目对接阶段对话框 -->
    <el-dialog :title="title" :visible.sync="openDock" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="人员添加">
          <el-select v-model="form.stepUserIds" multiple placeholder="请选择相关员工">
            <el-option
              v-for="item in stepUserOptions"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阶段开始时间" prop="projectStartDate">
          <el-date-picker clearable
                          v-model="form.stepStartDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择阶段开始时间"
                          @change="dateContrast('form', 1)"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="阶段结束时间" prop="projectEndDate">
          <el-date-picker clearable
                          v-model="form.stepEndDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择阶段结束时间"
                          @change="dateContrast('form')"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="文件上传" prop="postSort">
          <span>预留</span>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--这里改项目信息表的 项目阶段-->
        <el-button type="success" @click="submitForm1">进入下一阶段</el-button>
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo
} from "@/api/project/info";
import {addPost, updatePost} from "@/api/system/post";

export default {
  name: "zdyProjectInfo",
  dicts: ['feiju_user_type', 'project_step', 'project_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示对接阶段编辑页
      openDock: false,
      // 是否显示勘察阶段编辑页
      openExploration: false,
      // 是否显示方案编制阶段编辑页
      openPlanPreparation: false,
      // 是否显示方案汇报阶段编辑页
      openPlanReportDock: false,
      // 是否显示报价阶段编辑页
      openQuotation: false,
      // 是否显示施工阶段编辑页
      openConstruction: false,
      // 是否显示验收阶段编辑页
      openAccept: false,
      // 是否显示合同签订阶段编辑页
      openContractSign: false,
      // 项目信息表单参数
      form: {},
      InfoCardObj: {},
      // 表单校验
      rules: {},
      deptPosts: [],
      recepters: [],
      phones: [],
      //所有人员对象
      userOptions: [],
      //阶段人员对象
      stepUserOptions: [],
      //根据项目类型的不同应该渲染成不同的页面 (默认非居)
      projectType: 0

    };
  },
  mounted() {
  },
  created() {
    const projectId = this.$route.params && this.$route.params.projectId;
    // this.projectType = this.$route.params && this.$route.params.projectType;
    this.getInfo(projectId);
  },
  methods: {
    getUserName() {
      const user = this.userOptions.find(user => user.userId === this.InfoCardObj.geo);
      return user ? user.nickName : '';
    },
    getInfo(projectId) {
      getInfo(projectId).then(response => {
        //项目信息
        this.InfoCardObj = response.data
        this.userOptions = response.users //对象数组
        this.stepUserOptions = response.stepUsers;
        this.InfoCardObj.userIds = response.userIds
        // console.log(this.InfoCardObj.userIds)
        // console.log('InfoCardObj=', this.InfoCardObj)
        // console.log(this.InfoCardObj.address)
      })
    },
    openDockStage() {
      this.reset();
      this.openDock = true;
      this.title = "对接阶段";
    },
    openExplorationStage() {

    },
    openPlanPreparationStage() {

    },
    openPlanReportStage() {

    },
    openQuotationStage() {

    },
    openConstructionStage() {

    },
    openAcceptStage() {

    },
    openContractSignStage() {

    },

    /** 提交按钮 */
    submitForm1: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.stepId != undefined) {
            updatePost(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openDock = false;
            });
          } else {
            addPost(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openDock = false;
            });
          }
        }
      });
    },
    // 取消按钮
    cancel1() {
      this.openDock = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        stepStartDate: null,
        stepEndDate: null,
        stepUserIds: []
      };
      this.resetForm("form");
    },
    dateContrast(form, type) {
      if (new Date(this[form].stepStartDate) > new Date(this[form].stepEndDate)) {
        if (type) {
          this.$set(this[form], "stepEndDate", this[form].stepStartDate);
        } else {
          this.$set(this[form], "stepStartDate", this[form].stepEndDate);
        }
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.projectId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "项目新增";
    },


  }
};
</script>

<style lang="scss" scoped>@import "~@/assets/styles/InspectionFrame.scss";</style>

<style lang="scss">
.app-container {
  .main {
    .main2 {
      .mainContent {
        .el-table {
          height: 100%;
        }
      }
    }
  }
}

.enablestatus {
  .dictRed {
    color: #f56c6c;
  }

  .dictBlue {
    color: #1890ff;
  }

  .dictGrey {
    color: #909399;
  }
}
</style>

<style>
.esri-ui-manual-container > .esri-component {
  display: none;
}
</style>
<style lang="scss" scoped>

.mapTitle {
  padding: 10px;
  //background-image: url("~@/assets/images/background.jpg");
}

.big {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0;
  padding: 0;

  #viewDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

.buttons_Combine {
  display: flex;
  justify-content: flex-end;
}

.app-container {
  .main {
    .main2 {
      .mainContent {
        margin: 0;
        height: calc(100% - 46px);
        overflow: auto;

        ::v-deep.el-table--border .el-table__cell .cell {
          border-right: none;
          line-height: 23px;
          padding: 0;
        }

        ::v-deep.el-table {
          height: 100%;
        }

        ::v-deep.el-table__body-wrapper {
          height: calc(100% - 45px);
          overflow: auto;
        }

        ::v-deep.el-tag--medium {
          height: 23px;
          line-height: 23px;
        }
      }
    }

    ::v-deep.el-tabs--top {
      padding: 5px 10px;
      padding-top: 0;
    }

    .ToolBar {
      button {
        padding: 10px 10px;
      }
    }
  }

  //下半
  .rightSidebarTop {
    .content {
      padding: 10px;
      height: 100%;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      overflow: auto;

      .ListRow {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #606266;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 120px auto;
        grid-column-gap: 10px;
        align-items: center;


        .ListName {
          text-align: right;
        }

        .ListValue {
          font-size: 14px;
        }
      }
    }
  }

  .rightSidebarBottom {
    ::v-deep.el-date-editor.el-input {
      width: auto;
    }

    ::v-deep.el-tabs__content {
      overflow: visible;
    }

    ::v-deep.el-form-item {
      margin-bottom: 15px;
    }

    ::v-deep.el-form-item__error {
      padding-top: 2px;
    }

    .LogCard {
      margin-bottom: 5px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #606266;

      .LogTime {
        background: #f4f4f5;
        border-radius: 4px 4px 0px 0px;
      }

      .LogRow {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        border-bottom: 1px solid #dcdfe6;
      }
    }
  }

  .infoTable {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(4, auto);
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    border-right: none;
    border-bottom: none;

    .Table_lump {
      font-size: 14px;
      color: #606266;
      border-right: 1px solid #dcdfe6;
      border-bottom: 1px solid #dcdfe6;

      .title,
      .value {
        text-align: left;
        line-height: 40px;
        padding-left: 15px;
        margin: auto;
        height: 40px;
      }

      .title {
        background: #f4f4f5;
        height: 40px;
      }
    }
  }
}
</style>

<style lang="scss">
#PrintMainTable {
  .el-table .caret-wrapper {
    height: 28px;

    .sort-caret.ascending {
      top: 3px;
    }

    .sort-caret.descending {
      bottom: 3px;
    }
  }
}

.stage {
  width: 290px;
  height: 183px;
  background-color: rgba(250, 250, 250, 1);
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);

}

.stage.margin {
  margin-right: 50px;

  .runContentButton {
    cursor: pointer;
    width: 85%;
    height: 38px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.16);
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: white;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */

  }

  .runContentButton1 {
    cursor: pointer;
    width: 42%;
    margin-left: 2%;
    height: 38px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.16);
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: white;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */

  }


  &:hover {
    border: 1px solid rgba(41, 121, 255, 1);

    button {
      background: rgba(41, 121, 255, 1);
    }
  }
}

.stageFont {
  font-size: 15px;
  font-weight: bold;
}

.centerPosition {
  display: flex;
  justify-content: center;
  align-items: center;

}

.centerPosition .stageFont .runDate {
  margin-top: 16px;
}

.closeButton {
  float: right;
  width: 72px;
  height: 36px;
  border: 1px solid rgba(220, 230, 230, 1);
  background-color: white;
  border-radius: 5px;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  &:hover {
    background-color: rgba(220, 223, 230, 1);
  }
}

</style>
